<template>
  <div class="questions-details">
    <div class="header">
      <p class="title">{{questionData.title}}</p>
      <div class="desc">
        <span>{{questionData.createTime}}</span>
        <span>{{questionData.author.name}}</span>
      </div>
      <div class="content">{{questionData.content}}</div>
    </div>
    <div class="body">
      <div v-for="(item, index) in questionData.answers" :key="index" class="answers">
        <div class="author-name">{{item.author.name}}</div>
        <div class="answer-content">
          <div>{{item.content}}</div>
          <div class="answer-actions">
            <el-button
              round
              icon="icon-web-like-fill"
              @click="handleOnClickLike(item)"
            >{{item.like}}</el-button>
            <span>发布于: {{item.createTime}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'question-details',
  data() {
    return {
      questionData: { author: {} }
    }
  },
  created() {
    this._getData();
  },
  methods: {
    async _getData() {
      let id = this.$route.params.id;
      let res = await this.$http.questionDetails({ questionId: id });
      this.questionData = res.data;
    },
    async handleOnClickLike(item) {
      let param = {
        answerId: item._id
      }
      let res = await this.$http.like(param);
      console.log(res)
    }
  }
}
</script>
<style lang="less" scoped>
.questions-details {
  width: 100%;
  background-color: #ffffff;
  padding: 10px;
  .header {
    width: 100%;
    position: relative;
    padding-bottom: 8px;
    &::after {
      content: "";
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      border: 1px dashed #d9d9d9;
    }
    .title {
      font-size: 22px;
      color: #222222;
    }
    .content {
      font-size: 16px;
      color: #222222;
      margin: 8px 0;
    }
    .desc {
      display: flex;
      flex-direction: column;
      font-size: 13px;
      color: #999999;
      margin-top: 8px;
    }
  }
  .answers {
    padding: 8px 0;
    display: flex;
    .author-name {
      margin-right: 10px;
    }
    .answer-actions {
      margin-top: 8px;
    }
  }
}
</style>
